<template>
  <!-- 登录页面 -->
  <view>
    <view class="lealidator-box" v-if="phoneisshow">
      <view class="title">手机号登录</view>
      <u-field class="lablecolor" v-model="phone" label="手机号" placeholder="请填写手机号" :border-bottom="false">
      </u-field>
      <u-field class="lablecolor" v-model="pwd" :type="type" label="密码" placeholder="请填写密码" :border-bottom="false">
        <u-icon v-if="iconisshow" slot="right" size="32" name="eye" @click="pwdshow"></u-icon>
        <u-icon v-else size="32" slot="right" name="eye-fill" @click="pwdhidden"></u-icon>
      </u-field>
      <button class="btns" type="primary" @click="login">登录</button>
    </view>
    <view class="lealidator-box" v-else>
      <view class="title">验证码登录</view>
      <u-field class="lablecolor" v-model="phone" label="手机号" placeholder="请输入手机号" :border-bottom="false">
      </u-field>
      <u-field class="lablecolor" v-model="yzm" label="验证码" placeholder="请输入验证码" :border-bottom="false">
        <text slot="right" class="yanzhengma" @click="sendcode">
          <text>{{!codeTime?'获取验证码':codeTime+'s'}}</text>
        </text>
      </u-field>
      <button class="btns" type="primary" @click="yzmlogin">登录</button>
    </view>

    <view class="forgetpassword" @click="forgetpwd">忘记密码?</view>
    <view class="bottom-box">
      <view class="login-btn" @click="loginbtn" v-if="phoneisshow">验证码登录</view>
      <view class="login-btn" @click="loginbtn" v-else>手机号登录</view>
      <view class="">
        还没有账号，
        <text class="zhuce-title" @click="register">立即注册</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        phoneisshow: true, // 邮箱手机号切换
        type: 'password', // 密码的显示与隐藏
        iconisshow: true, // 图标的显示与隐藏
        phone: '', // 手机号
        pwd: '', // 密码
        yzm: '', //验证码
        codeTime: 0 // 倒计时时间
      }
    },
    methods: {
      loginbtn() {
        this.phoneisshow = !this.phoneisshow
      },
      // 忘记密码
      forgetpwd() {
        uni.navigateTo({
          url: '../forgetpassword/forgetpassword'
        })
      },
      pwdshow() {
        this.type = 'text'
        this.iconisshow = !this.iconisshow
      },
      pwdhidden() {
        this.type = 'password'
        this.iconisshow = !this.iconisshow
      },
      register() {
        uni.navigateTo({
          url: '../register/register'
        })
      },
      // 登录方法
      async login() {
        if (this.phone.length == 0 || this.pwd.length == 0) {
          return uni.showToast({
            title: '手机号或密码不能为空',
            icon: "none"
          })
        }
        // 手机号验证
        var reg = /^1[3|4|5|7|8|9][0-9]{9}$/
        if (reg.test(this.phone) == false) {
          return uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
          })
        }
        const {
          data: res
        } = await this.$myHttp({
          method: 'POST',
          url: 'shows/index/login_pwd',
          data: {
            phone: this.phone,
            pwd: this.pwd
          }
        })
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000
          })
          if(res.data.ievel==false){
            uni.showToast({
              title:'您的VIP已到期',
              icon: "none",
              duration: 4000
            })
          }
          uni.setStorageSync('uid', res.data.uid)
          uni.setStorageSync('token', res.data.token)
          uni.switchTab({
            url:'../../pages/home/home'
          })
          // uni.navigateBack()
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000
          })
        }
      },
      // 获取验证码
      async sendcode() {
        if (this.phone.length ==0) {
        	return uni.showToast({
        		icon: 'error',
        		title: '手机号不能为空',
            duration:2000
        	})
        }
        // 手机号验证
        var reg=/^1[3|4|5|7|8|9][0-9]{9}$/
        if(reg.test(this.phone)==false){
          return uni.showToast({
            title:'请输入正确的手机号',
            icon:'none'
          })
        }
        // 验证码倒计时
        if(this.codeTime>0){
           uni.showToast({
             title:'不能重复获取',
             icon:'none',
             duration:2000
           })
         }else{
           this.codeTime=60
           let timer=setInterval(()=>{
             this.codeTime--;
             if(this.codeTime<1){
               clearInterval(timer)
               this.codeTime=0
             }
           },1000)
         }
        const {
          data: res
        } = await this.$myHttp({
          method: 'POST',
          url: 'shows/index/send',
          data: {
            phone: this.phone
          }
        })
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: "none"
          })
        }else{
          uni.showToast({
            title: res.msg,
            icon: "none"
          })
        }
      },
      // 验证码登录
      async yzmlogin() {
        const {
          data: res
        } = await this.$myHttp({
          method: 'POST',
          url: 'shows/index/login_yzm',
          data: {
            phone: this.phone,
            yzm: this.yzm
          }
        })
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: "none"
          })
          uni.switchTab({
            url:'../../pages/home/home'
          })
          if(res.data.ievel==false){
            uni.showToast({
              title:'您的VIP已到期',
              icon: "none",
              duration: 4000
            })
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000
          })
        }
      }
    }
  }
</script>

<style>
  page {
    background-color: #121d3b;
    color: #FFFFFF;
  }

  .lealidator-box {
    margin: 100rpx 40rpx 0;
  }

  .title {
    font-size: 50rpx;
    margin-bottom: 50rpx;
  }

  .yanzheng {
    color: #FFFFFF;
    border: 1rpx solid #007AFF;
    padding: 10rpx 20rpx;
    color: #007AFF;
    border-radius: 10rpx;
  }

  .lablecolor {
    color: #FFFFFF;
  }

  .btns {
    margin-top: 100rpx;
  }

  .forgetpassword {
    text-align: center;
    color: #b7c0df;
    margin-top: 40rpx;
  }

  .bottom-box {
    position: fixed;
    bottom: 60rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .login-btn {
    padding: 10rpx 20rpx;
    color: #007AFF;
    border: 1px solid #007AFF;
    border-radius: 10rpx;
    margin-bottom: 40rpx;
    text-align: center;
  }

  .zhuce-title {
    color: #007AFF;
  }
</style>
